:root {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #000 30%,
    #e7bf00
  );
  --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #73bc0b 50%,
    #f6e033 50%
  );
  --vp-home-hero-image-filter: blur(80px);
}

.dark {
  --vp-home-hero-name-background: -webkit-linear-gradient(
    120deg,
    #f9f4d8 30%,
    #f6e033
  );
}

/* Site theme */
:root {
  --vp-c-brand-1: #ff9933;
}

/* メインコンテンツの幅を広げます。最大1920pxまでを許可します。 */
#app .VPDoc.has-aside .content-container {
  max-width: 1280px;
}

@media (min-width: 1440px) and (max-width: 1920px) {
  /* 左上タイトル領域 */
  #app .VPNavBar.has-sidebar .container > .title {
    padding-left: 32px;
    width: var(--vp-sidebar-width);
  }

  /* 左メニュー領域 */
  #app .VPSidebar {
    padding-left: 32px;
    width: var(--vp-sidebar-width);
  }

  /* コンテンツ領域 */
  #app .VPContent.has-sidebar {
    padding-right: 0;
    padding-left: var(--vp-sidebar-width);
  }

  /* ヘッダー領域 */
  #app .VPNavBar.has-sidebar .content {
    padding-right: 32px;
    padding-left: var(--vp-sidebar-width);
  }

  /* ヘッダーの下線 */
  #app .VPNavBar.has-sidebar .divider {
    padding-left: var(--vp-sidebar-width);
  }
}

@media (min-width: 1920px) {
  :root {
    --vp-layout-max-width: 1920px;
  }
}

/* For Online Demo */
.demo-grid {
  width: 100%;
  height: 300px;
  box-sizing: border-box;
  border: solid 1px #ddd;
  flex-grow: 1;
}

.demo-grid.large {
  height: 500px;
}

.demo-grid.middle {
  height: 300px;
}

.demo-grid.small {
  height: 240px;
}
